<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)
</script>

<template>
  <Carousel.Root :slide-count="images.length" autoplay loop>
    <Carousel.Control>
      <Carousel.Context v-slot="context">Autoplay is: {{ context.isPlaying ? 'playing' : 'paused' }}</Carousel.Context>
    </Carousel.Control>
    <Carousel.Context v-slot="api">
      <Carousel.ItemGroup @pointerover="api.pause()" @pointerleave="api.play()">
        <Carousel.Item v-for="(image, idx) in images" :key="idx" :index="idx">
          <img :src="image" alt="" />
        </Carousel.Item>
      </Carousel.ItemGroup>
    </Carousel.Context>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator v-for="(_, idx) in images" :key="idx" :index="idx" />
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>
